<div class="container operate">
  <i nz-icon nzType="profile" nzTheme="outline" class="card-title"></i>
  <span class="card-title">数据列表</span>
  <button nz-button style="float: right;" nzSize="small" (click)="handleAdd()"> 添加 </button>
</div>
<div class="table-container">
  <nz-table #menuTable nzSize="small" [nzData]="menuList" [nzFrontPagination]="false" [nzShowPagination]="false"
    nzBordered [nzLoading]="tableLoading">
    <thead>
      <tr>
        <th nzAlign="center" nzWidth="4%">编号</th>
        <th nzAlign="center" nzWidth="18%">菜单名称</th>
        <th nzAlign="center" nzWidth="10%">菜单级数</th>
        <th nzAlign="center" >前端名称</th>
        <th nzAlign="center" nzWidth="10%">是否显示</th>
        <th nzAlign="center" nzWidth="10%">排序</th>
        <th nzAlign="center" nzWidth="10%">设置</th>
        <th nzAlign="center" nzWidth="10%">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of menuTable.data">
        <td nzAlign="center">{{data.id}}</td>
        <td nzAlign="center">{{data.title}}</td>
        <td nzAlign="center">{{data.level | productCateLevel}}</td>
        <td nzAlign="center">{{data.name}}</td>
        <td nzAlign="center">
          <nz-switch [(ngModel)]="!data.hidden" [nzControl]="true" (click)="handleaShowStatusClick(data.id)"
            [nzLoading]="showStatusLoadingStatus.get(data.id)">
          </nz-switch>
        </td>
        <td nzAlign="center">{{data.sort}}</td>
        <td nzAlign="center">
          <button nz-button nzType="link" (click)="handleGoDownLevel(data.id)"
            [disabled]="data.parentId != 0">查看下级</button>
        </td>
        <td nzAlign="center">
          <button nz-button nzType="link" (click)="handleEdit(data)">编辑</button>
          <button nz-button nzType="link" nz-popconfirm nzPopconfirmTitle="确定删除该菜单?" nzOkText="确定" nzCancelText="取消"
            (nzOnConfirm)="handleDelete(data.id)" (nzOnCancel)="cancelDelete()">删除</button>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<div class="pagination-container">
  <nz-pagination [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" [nzTotal]="total"
    [nzPageSizeOptions]="[10, 15,20]" nzShowQuickJumper nzShowSizeChanger [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="handlePageIndexChange()" (nzPageSizeChange)="handlePageSizeChange()">
  </nz-pagination>
  <ng-template #totalTemplate let-total>共{{total}}条</ng-template>
</div>


<nz-modal [(nzVisible)]="isInfoVisible" [(nzTitle)]="inforFormTitle" (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleModalOk()">
  <form nz-form [formGroup]="menuFrom">
    <nz-form-item>
      <nz-form-label nzSpan="6">
        角色名称
      </nz-form-label>
      <nz-form-control nzSpan="12">
        <input nz-input formControlName="title" id="title" />
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>
